<template>
  <el-container :class="$style.Wrapper">
    <el-header :class="$style.hearder">
      <div :class="$style.text">电商后台管理系统</div>
      <el-button type="info" @click="exitUser">退出</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px" :class="$style.aside">
        <el-menu
          router
          :default-active="MenuState"
          class="el-menu-vertical-demo"
          background-color="#35393b"
          text-color="#fff"
          active-text-color="#569cd6"
          unique-opened
        >
          <el-submenu
            :index="item.id + ''"
            :key="index"
            v-for="(item, index) in MenuList"
          >
            <template slot="title">
              <i :class="MenuIconList[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>

            <el-menu-item
              @click="saveMenu('/home/' + newItem.path)"
              v-for="(newItem, index) in item.children"
              :key="index"
              :index="'/home/' + newItem.path"
            >
              <i class="el-icon-menu"></i>
              <span>{{ newItem.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      MenuList: [],
      MenuIconList: {
        "125": "el-icon-user-solid",
        "103": "el-icon-phone",
        "101": "el-icon-s-shop",
        "102": "el-icon-s-ticket",
        "145": "el-icon-s-order",
      },
      MenuState: "",
    };
  },
  created() {
    this.MenuState = window.sessionStorage.getItem("MenuState");
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    //获取主页菜单列表
    async getMenuList() {
      const { data: res } = await this.$axios.get("menus");
      // console.log(res);
      this.MenuList = res.data;
    },

    // 保存导航菜单选中状态
    saveMenu(state) {
      window.sessionStorage.setItem("MenuState", state);
      console.log(this.MenuState);
      this.MenuState = state;
    },

    //退出登录当前用户
    async exitUser() {
      const flag = await this.$confirm("是否退出当前登录用户？", "退出用户", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).catch((err) => err);
      console.log(flag);
      if (flag == "confirm") {
        this.$message.success("退出登录成功")
        window.sessionStorage.removeItem("token");
        this.$router.push("/login");
      } 
      else {
        this.$message.info("你取消了退出");
      }
    },
  },
};
</script>

<style module>
.Wrapper {
  width: 100%;
  height: 100%;
}
.text {
  font-size: 36px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei",
    sans-serif;
}
.hearder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #35393b;
}

.aside {
  background-color: #35393b;
}
</style>

<style>
.el-menu {
  border-right: 0;
  user-select: none;
}
</style>
